import React,{Component} from "react";
import style from "./index.module.scss";
import header from "../../base/Header/index";
import MAlert from "../../base/MAlert";
import MapGDP from "../../component/MapGDP"

import { Form, Input, Button, Mentions,Image, message} from 'antd';

import { PickerView,Toast,Icon, Picker,TextareaItem } from 'antd-mobile';
import 'antd-mobile/dist/antd-mobile.css';

import PickerGroup from "../../component/PickerGroup/index";
import SelectGroup from "../../component/SelectGroup/index";

import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import "./autdfix.scss";

const argName = {
    name:"书名",
    author:"作者",
    publisher:"出版社",
    ISBN:"标准书号",
    grade:"品相",
    type:"图书分类",
    location:"发货地址",
    cover:"封面",
    legend_1:"详情图1",
    legend_2:"详情图2",
    legend_3:"详情图3",
    description:"图书简介",
    price:"售价",
    origin_price:"原价",
    inventory:"存量",
    getSelf:"支持自取",
}

class BookInfoPull extends Component {
    constructor(props){
        super(props);
        this.state={
            showAlert:false,
            formFill:false,
            bookTypeLeve1Index:0,
            bookTypeLeve2Index:0,
            bookInfo:{
                bid:"",
                uid:"",
                name:"",
                author:"",
                publisher:"",
                ISBN:"",
                grade:7,
                type:"教材教辅,全部推荐",
                address:"",
                position:"",
                cover:"",
                legend_1:"",
                legend_2:"",
                legend_3:"",
                description:"",
                price:0,
                origin_price:0,
                inventory:1,
                getSelf:1,
                relstatus:0,
                releasetime:"",
            },
            value:null,
        }
    }

    onChange = (value) => {
        console.log(value);
        this.setState({
          value,
        });
      }
      onScrollChange = (value) => {
        console.log(value);
      }


    callAlert(flag){
        this.setState({showAlert:flag});
    }

    onFinish(values){
        let {bookInfo: bookInfoNext} = this.state;
        bookInfoNext = {...bookInfoNext, ...values};
        this.setState({bookInfo:bookInfoNext,formFill:true});
        setTimeout(()=>{
            let {bookInfo} = this.state;
            if(!bookInfo.description) bookInfo.description="喜欢的话，可以联系我~";
            this.props.history.push({pathname:"/bookinforelease",state:bookInfo});
        },100);
    }
    onFinishFailed(values){
        /* PC端 消息框
        let errArgList = values.errorFields;
        errArgList.length = 3;
        errArgList.forEach(errItem=>{
            console.log(errItem);
            if(errItem) this.showToast(errItem.name[0]);
        });
        */
       
        // 移动端 轻提示
        let errArgListM = values.errorFields;
        if(errArgListM.length){
            let errItem = errArgListM[0];
            this.showToast(errItem.name[0]);
        };

        // this.setState({formFill:false,showAlert:true})
    }
    // 移动端 轻提示
    showToast(arg){
        Toast.info(`“${argName[arg]}”不能为空!`,1);
    }
    // PC端 消息框
    info(arg){
        message.info(`“${argName[arg]}”不能为空!`);
    };
    
    setBookType(index,value){
        let {bookInfo} = this.state;
        let {type:typeLeve} = bookInfo;
        if(index) typeLeve = typeLeve.split(",")[0]+","+value;
        else typeLeve = value;
        bookInfo.type = typeLeve;
        this.setState({bookInfo});
        setTimeout(()=>{
            console.log("bookInfo",this.state.bookInfo.type);
        });
    }
    setBookImg(arg,data){
        let {bookInfo} = this.state;
        bookInfo[arg] = data;
        this.setState({bookInfo});
        setTimeout(()=>{
            console.log(this.state.bookInfo);
        });
    }
    removeImg(arg){
        let {bookInfo} = this.state;
        bookInfo[arg] = "";
        this.setState({bookInfo});
    }

    addEvent(){
        let fileEl =  this.fileEle;
        fileEl.addEventListener("change", (e) => {
            let upFile = e.target.files[0];
            if(!upFile) return  this.setState({updateHead:false});;
            let frd = new FileReader();
            frd.readAsDataURL(upFile);
            frd.onload = () => {
              let imgUrl = frd.result;
              this.setBookImg("cover",imgUrl);
              fileEl.value="";
            };
        });

        let fileEl1 =  this.fileEle1;
        fileEl1.addEventListener("change", (e) => {
            let upFile = e.target.files[0];
            if(!upFile) return  this.setState({updateHead:false});;
  
            let frd = new FileReader();
            frd.readAsDataURL(upFile);
            frd.onload = () => {
              let imgUrl = frd.result;
              this.setBookImg("legend_1",imgUrl);
              fileEl1.value="";
            };
        });

        let fileEl2 =  this.fileEle2;
        fileEl2.addEventListener("change", (e) => {
            let upFile = e.target.files[0];
            if(!upFile) return  this.setState({updateHead:false});;
  
            let frd = new FileReader();
            frd.readAsDataURL(upFile);
            frd.onload = () => {
              let imgUrl = frd.result;
              this.setBookImg("legend_2",imgUrl);
              fileEl2.value="";
            };
        });

        let fileEl3 =  this.fileEle3;
        fileEl3.addEventListener("change", (e) => {
            let upFile = e.target.files[0];
            if(!upFile) return  this.setState({updateHead:false});;
  
            let frd = new FileReader();
            frd.readAsDataURL(upFile);
            frd.onload = () => {
              let imgUrl = frd.result;
              this.setBookImg("legend_3",imgUrl);
              fileEl3.value="";
            };
        });
    }

    fillChoseLocation(address,position){
        let {bookInfo} = this.state;
        bookInfo.address = address;
        bookInfo.position = position;
        this.setState({bookInfo});
        setTimeout(()=>{
            console.log(this.state.bookInfo);
        })
    }

    componentDidMount(){
        this.addEvent();
        // Toast.loading('Loading...', 30, () => {
        //     console.log('Load complete !!!');
        //   });
      
        //   setTimeout(() => {
        //     Toast.hide();
        //   }, 3000);
    }

    render(){
        const { loading, bookInfo } = this.state;

        const uploadButton = (
            <div className={style["uploadButton"]} onClick={()=>{ this.fileEle.click()}}>
              {loading ? <LoadingOutlined /> : <PlusOutlined />}
            </div>
        );
        const uploadButton1 = (
            <div className={style["uploadButton"]} onClick={()=>{ this.fileEle1.click()}}>
              {loading ? <LoadingOutlined /> : <PlusOutlined />}
            </div>
        );
        const uploadButton2 = (
            <div className={style["uploadButton"]} onClick={()=>{ this.fileEle2.click()}}>
              {loading ? <LoadingOutlined /> : <PlusOutlined />}
            </div>
        );
        const uploadButton3 = (
            <div className={style["uploadButton"]} onClick={()=>{ this.fileEle3.click()}}>
              {loading ? <LoadingOutlined /> : <PlusOutlined />}
            </div>
        );

        return (
            <div className={style["index-root"]}>
                 {header({
                    history:this.props.history,
                    title:"商品信息",
                })}

                <div className={style["form-container"]} ref={formEle => this.formEle = formEle}>
                    <Form 
                        name="basic"
                        initialValues={{ remember: true }}
                        onFinish={this.onFinish.bind(this)}
                        onFinishFailed={this.onFinishFailed.bind(this)}
                    >

                        <h2 className={style["class-title"]}>基本信息</h2>
                        <ul className={style["info-box"]}>
                           <li><b>书名</b>
                                <Form.Item name="name"  rules={[{required: true, message: ''}]}>
                                    <Input placeholder="必填" />
                                </Form.Item>
                            </li>
                            <li><b>作者</b>
                                <Form.Item name="author"  rules={[{required: true, message: ''}]}>
                                    <Input placeholder="必填" />
                                </Form.Item>
                            </li>
                            <li><b>出版社</b>
                                <Form.Item name="publisher"  rules={[{required: true, message: ''}]}>
                                    <Input placeholder="必填" />
                                </Form.Item>
                            </li>
                            <li><b>ISBN</b>
                                <Form.Item name="ISBN"  rules={[{required: true, message: ''}]}>
                                    <Input placeholder="必填" />
                                </Form.Item>
                            </li>
                        </ul>

                        <h2 className={style["class-title"]}>其他信息</h2>
                        <ul className={style["info-box"]}>
                            <li><b>品相等级</b>
                                <Form.Item name="grade"  rules={[{required: true, message: ''}]}>
                                    <Input type="number" placeholder="6 ~ 9" />
                                </Form.Item>
                            </li>
                            <li><b>图书分类</b>
                                <SelectGroup setValue = {this.setBookType.bind(this)}></SelectGroup>
                               {/* <PickerGroup setSelectValue = {this.setBookType.bind(this)}></PickerGroup> */}
                            </li>
                            <li><b>库存</b>
                                <Form.Item name="inventory"  rules={[{required: true, message: ''}]}>
                                    <Input placeholder="必填" />
                                </Form.Item>
                            </li>
                            <li><b>商品地址</b>
                                <span className={style["input"]} onClick={()=>{
                                            this.formEle.scrollTo({
                                                top: 310,
                                                behavior:"smooth"
                                            })
                                            this.callAlert(true)
                                        }}>
                                    {this.state.bookInfo.address?this.state.bookInfo.address:"必填"}
                                </span>
                            </li>
                        </ul>

                        <h2 className={style["class-title"]}>添加封面</h2>
                        <div className={style["cover-box"]}>
                            <div className={style["uploadimg-box"]}>
                                <input type="file" style={{display:"none"}} accept="image/png,image/jpeg,image/gif" ref={fileEle => this.fileEle = fileEle} />
                                {bookInfo.cover
                                    ? <> 
                                        <Image width={56} src={bookInfo.cover} 
                                            fallback={require("../../common/image/imgloaderr.png").default}
                                            placeholder={
                                                <Image width={56} preview={false}
                                                    src={bookInfo.cover}/>
                                            }
                                        />
                                        <Icon className={style["removeimg-btn"]} 
                                            onClick={this.removeImg.bind(this,"cover")} type="cross-circle-o" size="xs" />
                                     </>
                                    : uploadButton
                                }
                                <span className={style["span-mark"]}>封面</span>
                            </div>
                            <div className={style["uploadimg-box"]}>
                                <input type="file" style={{display:"none"}} accept="image/png,image/jpeg,image/gif" ref={fileEle1 => this.fileEle1 = fileEle1} />
                                {bookInfo.legend_1
                                    ? <> 
                                        <Image width={56} src={bookInfo.legend_1}
                                            fallback={require("../../common/image/imgloaderr.png").default}
                                            placeholder={
                                                <Image width={56} preview={false}
                                                    src={bookInfo.legend_1}/>
                                            }
                                        />
                                        <Icon className={style["removeimg-btn"]} 
                                            onClick={this.removeImg.bind(this,"legend_1")} type="cross-circle-o" size="xs" />
                                    </>
                                    : uploadButton1
                                }
                            </div>
                            <div className={style["uploadimg-box"]}>
                                <input type="file" style={{display:"none"}} accept="image/png,image/jpeg,image/gif" ref={fileEle2 => this.fileEle2 = fileEle2} />
                                {bookInfo.legend_2
                                    ? <> 
                                        <Image width={56} src={bookInfo.legend_2}
                                            fallback={require("../../common/image/imgloaderr.png").default}
                                            placeholder={
                                                <Image width={56} preview={false}
                                                    src={bookInfo.legend_2}/>
                                            }
                                        />
                                        <Icon className={style["removeimg-btn"]} 
                                            onClick={this.removeImg.bind(this,"legend_2")} type="cross-circle-o" size="xs" />
                                    </>
                                    : uploadButton2
                                }
                            </div>
                            <div className={style["uploadimg-box"]}>
                                <input type="file" style={{display:"none"}} accept="image/png,image/jpeg,image/gif" ref={fileEle3 => this.fileEle3 = fileEle3} />
                                {bookInfo.legend_3
                                    ? <> 
                                        <Image width={56} src={bookInfo.legend_3}
                                            fallback={require("../../common/image/imgloaderr.png").default}
                                            placeholder={
                                                <Image width={56} preview={false}
                                                    src={bookInfo.legend_3}/>
                                            }
                                        />
                                        <Icon className={style["removeimg-btn"]} 
                                            onClick={this.removeImg.bind(this,"legend_3")} type="cross-circle-o" size="xs" />
                                    </>
                                    : uploadButton3
                                }
                            </div>
                        </div>

                        <h2 className={style["class-title"]}>商品描述</h2>
                        <div className={style["describe-box"]}>
                            <Form.Item name="description" rules={[{ required: false, message:''}]}>
                                 <TextareaItem placeholder="喜欢的话请联系我~"
                                    value={this.state.bookInfo.description}
                                    onChange={value=>{
                                        let {bookInfo} = this.state;
                                        bookInfo.description = value;
                                        this.setState({bookInfo});
                                    }}
                                 />
                            </Form.Item>
                        </div>

                        <div className={style["submit-box"]}>
                            <Form.Item >
                                <Button type="primary" className={style["submit-btn"]} htmlType="submit">
                                    出价
                                </Button>
                            </Form.Item>
                        </div>
                    </Form>
                    
                </div>
                

                {this.state.showAlert ? 
                    <MAlert callAlert={this.callAlert.bind(this)} direction="center" 
                        closeBtnStyle={{width:"40px",height:"40px",lineHeight:"30px",right:"10px",top:"250px"}}
                    >
                        <div className={style["alert-body"]}>
                            <MapGDP fillChoseLocation = {this.fillChoseLocation.bind(this)}></MapGDP>
                        </div>
                    </MAlert> : null
                }
            </div>
        )
    }
}

export default BookInfoPull;